<template>
    <div >
        <v-dialog
            ref="checkRef"
            title="核算"
            :show.sync="dialogVisible"
            :modalAppendToBody="false"
            @beforeClose="beforeClose"
            width="1200px">
            <div class="card-box">
                <div>租赁押金</div>
                <el-table :data="tableData1" align="center">
                    <el-table-column prop="costMonth" label="账单月份" sortable width="180">
                        <template slot-scope="scope">
                            {{scope.row.costMonth|shortMonth}}
                        </template>
                    </el-table-column>
                    <!-- <el-table-column prop="roomCode" label="物业名称" sortable width="180"></el-table-column> -->
                    <el-table-column prop="chargeProjectName" label="收费项目">
                        <template >
                            租赁押金
                        </template>
                    </el-table-column>
                    <el-table-column prop="costPeriodStart" label="费用周期">
                        <template slot-scope="scope">
                            {{scope.row.costPeriodStart}}至{{scope.row.costPeriodEnd}}
                        </template>
                    </el-table-column>
                    <el-table-column prop="receivableDate" label="应付日期"></el-table-column>
                    <el-table-column prop="receivableMoney" label="应付金额(元)"></el-table-column>
                </el-table>
                <div>租金</div>
                <el-table :data="tableData" style="width: 100%;margin-bottom: 20px;" row-key="receivableId"  :default-expand-all="false"
                          :tree-props="{children: 'receivableList', hasChildren: 'hasChildren'}">
                    <el-table-column prop="costMonth" label="费用月份" sortable width="180">
                        <template slot-scope="scope">
                            {{scope.row.costMonth|shortMonth}}
                        </template>
                    </el-table-column>
                    <!-- <el-table-column prop="projectName" label="物业名称" sortable width="180"></el-table-column> -->
                    <el-table-column prop="chargeProjectName" label="收费项目"></el-table-column>
                    <el-table-column prop="costPeriodStart" label="费用周期">
                        <template slot-scope="scope">
                            {{scope.row.costPeriodStart}}至{{scope.row.costPeriodEnd}}
                        </template>
                    </el-table-column>
                    <el-table-column prop="receivableDate" label="应付日期"></el-table-column>
                    <el-table-column prop="receivableMoney" label="应付金额(元)"></el-table-column>
                </el-table>

            </div>
            <div><p>注：确认合同准确无误，点击审核通过生成合同应付；如果合同有误，点击退回租赁合同。</p></div>
            <span slot="foot">
                <el-button size="small" @click="returned">退回合同</el-button>
				<el-button size="small" @click="dialogVisible = false">取消</el-button>
				<el-button size="small" type="primary" @click="account">审核通过</el-button>
                <!--<el-button @click="dialogVisible = false">取 消</el-button>
                <el-button @click="commit">提 交</el-button>-->
          </span>
        </v-dialog>
    </div>
</template>

<script>
    import engineerList from '@/components/engineer-list'
    import {check,checkSubmit,generateProFee} from '@/views/rent/api/rent-contract-acceptance.js'

    import BaseLoad from '@/assets/vue-mixin/BaseLoad'
    import {mapState} from 'vuex'
    export default {
        mixins: [BaseLoad],
        components: { engineerList},
        data() {
            return {
                dialogVisible: false,
                tableData: [],
                tableData1:[],
                form: {
                    remarks: "",
                    busId: "",
                    category: 2,
                },
                dialogVisible1: false
            }
        },

        methods: {
            show(item) {
                this.dialogVisible = true
                setTimeout(() => {
                    if(item){
                        //console.log(item)
                        this.form.busId = item.rentContractId
                        check(item.rentContractId).then(res=>{
                            // this.construction=res.data.data
                            //alert(JSON.stringify(res.data.data));
                            this.tableData=res.data.data
                        });
                        generateProFee(item.rentContractId).then(res=>{
                            // this.construction=res.data.data
                            this.tableData1=res.data.data
                        });
                    }
                }, 200)

            },
            /*commit() {
                this.$refs.editForm.validate(valid => {

                })
            },
            beforeUpload() {
                this.loadAction('请稍等...')
            },
            receive() {
                this.$message('合同已确认接收！');
                this.dialogReceiveVisible = false;
                this.flag = true;
                this.btnText = "已接收";
                this.operText = "核算";
                console.log(this.flag);
            },*/
            returned() {
                this.$prompt('请填写退回原因', '退回原因', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    inputPattern: /\S/,
                    inputErrorMessage: '退回原因不能为空'
                }).then(({ value }) => {
                    this.form.remarks = value
                    const obj =  {
                        approvalResult:'03',
                        opinion:'退回'
                    }
                    checkSubmit({...this.form,...obj}).then(resp => {
                        if (resp.data.data) {
                            this.$message({
                                type: 'success',
                                message: '合同已退回经营部！'
                            });
                            this.dialogVisible = false;
                            this.$emit('resetList')
                            this.$emit('getTabListData')
                            this.$forceUpdate()
                        } else {
                            this.err('操作失败')
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '取消输入'
                    });
                });
            },
            account() {
                // console.log(this.$refs.checkRef)
                this.dialogVisible1 = true
                this.$confirm('是否确定合同数据已通过审核?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.loadAction('请稍等...')
                    const obj =  {
                        approvalResult:'02',
                        opinion:'同意'
                    }
                    checkSubmit({...this.form,...obj}).then(resp => {
                        if (resp.data.data) {
                            this.$message({
                                type: 'success',
                                message: '合同数据已审核通过！'
                            });
                            this.dialogVisible = false;
                            this.$emit('resetList')
                            this.$emit('getTabListData')
                            this.loadClose()
                        } else {
                            this.err('操作失败')
                            this.loadClose()
                        }
                    })
                }).catch((e) => {
                    this.$message({
                        type: 'info',
                        message: '已取消'
                    });
                });
            },
            beforeClose(done) {
                done();
            }
        }
    }
</script>

<style scoped lang='scss'>
    @include data-title();

    @include info-list(2);
    @include formWrap(3);
</style>
